<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>错题本</title>
  <link rel="stylesheet" href="/static/web/css/style.css?v=" + Date.now() >
  <script src="/static/component/jquery_3.3.1.js"></script>
  <style>
    /* 添加分页按钮样式 */
    .pagination button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 8px 16px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 4px;
    }
    
    .pagination button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
    
    /* 添加题目卡片之间的间隙和边框 */
    .card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .card:last-child {
      margin-bottom: 0;
    }
    
    /* 添加解析文字的亮红色样式 */
    .analysis-text {
      color: #ff0000;
    }
  </style>
</head>
<body class="container">
  <h2>❌ 错题本</h2>
  <div id="wrong-list"></div>
  <div class="pagination" id="pagination">
    <button id="prev-page">上一页</button>
    <span id="page-info"></span>
    <button id="next-page">下一页</button>
  </div>
  <script src="/static/web/js/layout.js?v=" + Date.now() ></script>
<!--  <script src="/static/web/js/checklogin.js?v=" + Date.now() ></script>-->

  <script>
    $(function () {
      let currentPage = 1;
      const pageSize = 5;
      
      // 从接口获取错题数据
      function loadWrongQuestions(page) {
        $.ajax({
          url: "/web.wrongQuestion/list",
          method: "POST",
          data: {
            page: page,
            page_size: pageSize
          },
          dataType: "json",
          success: function (response) {
            if (response.code === 0 && response.data && Array.isArray(response.data.data)) {
              $("#wrong-list").empty();
              response.data.data.forEach(q => {
                $("#wrong-list").append(`
                  <div class="card">
                    <h3>${q.title}（${q.type}）</h3>
                    <p>你的答案：<strong style="color:red">${q.you_answer}</strong></p>
                    <p>正确答案：<strong style="color:green">${q.answer}</strong></p>
                    <p>解析：<span class="analysis-text">${q.analysis || '暂无解析'}</span></p>
                  </div>
                `);
              });
              
              // 更新分页信息
              currentPage = page;
              $("#page-info").text(`第 ${response.data.current_page} 页，共 ${response.data.last_page} 页`);
              
              // 控制按钮状态
              if (response.data.current_page <= 1) {
                $("#prev-page").prop("disabled", true);
              } else {
                $("#prev-page").prop("disabled", false);
              }
              
              if (response.data.current_page >= response.data.last_page) {
                $("#next-page").prop("disabled", true);
              } else {
                $("#next-page").prop("disabled", false);
              }
            } else {
              console.error("[ERROR] 接口返回数据格式不正确:", response);
            }
          },
          error: function (xhr, status, error) {
            alert("无法加载错题记录，请稍后重试！");
          }
        });
      }
      
      // 初始化加载第一页
      loadWrongQuestions(1);
      
      // 上一页按钮点击事件
      $("#prev-page").click(function() {
        if (currentPage > 1) {
          loadWrongQuestions(currentPage - 1);
        }
      });
      
      // 下一页按钮点击事件
      $("#next-page").click(function() {
        loadWrongQuestions(currentPage + 1);
      });
    });
  </script>
</body>
</html>